<!--<template>
    <div :id="id" :optionsList="optionsList"  :color="color"></div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        props: ['id','optionsList','color'],
        data() {
            return {
                ChartPie: null
            }
        },
        mounted () {
            // optionsList  字段对象
            this.drawShape(this.id, this.optionsList, this.color)
        },
        beforeDestroy () {
            if(this.ChartPie){
                this.ChartPie.clear()
            }
        },
        methods:{
            drawShape(id, optionsList, color){
                let self = this
                self.ChartPie = echarts.init(document.getElementById(id));
                let options = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    series: [
                        {
                            name: optionsList.title,
                            type:'pie',
                            radius: ['40%', '70%'],  //控制圆弧的宽窄
                            avoidLabelOverlap: false,
                            hoverAnimation: false,  //鼠标经过的动画
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : false   //隐藏标示文字
                                    },
                                    labelLine : {
                                        show : false   //隐藏标示线
                                    }
                                }
                            },
                            data:[
                                {
                                    value: optionsList.UseRate,
                                    name: optionsList.datatitle1,
                                    itemStyle: {
                                        color: color //突出的颜色
                                    }
                                },
                                {
                                    value: optionsList.TotalUse-optionsList.UseRate,
                                    name: optionsList.datatitle2,
                                    itemStyle: {
                                        color: '#ebeae6'
                                    },
                                    emphasis:{
                                        itemStyle: {
                                            color: '#ebeae6'
                                        }
                                    }
                                }
                            ]
                        },
                    ]
                }
                this.ChartPie.setOption(options)
            }
        },
        watch: {
            optionsList: {
                handler(newValue, oldValue){
                    this.drawShape(this.id, newValue);
                },
                deep: true
            }
        }
    }
</script>-->
<template>
    <div v-bind:id=id v-bind:data=data v-bind:type=type></div>
    <!-- <div v-bind:id=id v-bind:data=data v-bind:type=type :dataUrl="dataUrl"></div> -->
</template>

<script>
    import echarts from 'echarts'
    import macarons from 'node_modules/echarts/theme/macarons.js'
    export default {
        props: ['id','data','type'],
        data() {
            return {
                ChartPie: null,
                // dataUrl: ''
            }
        },
        mounted () {
            this.drawShape(this.id, this.data, this.type)
            
        },
        beforeDestroy () {
            if(this.ChartPie){
                this.ChartPie.clear()
            }
        },
        methods: {
            drawShape(id,data, type){
                let self = this
                let myChart = document.getElementById(id)
                self.ChartPie = echarts.init(myChart, type)
                self.ChartPie.setOption(data)
                self.dataUrl = self.ChartPie.getDataURL()
                window.addEventListener('resize', () =>{
                    self.ChartPie.resize()
                })
            }
        },
        //深度监听，父组件开始传过来的值是没有数据的，只是图表的配置项，父组件进行ajax请求后改变数据的值，传递过来
        watch: {
            data: {
                handler(newValue, oldValue){
                    this.drawShape(this.id, newValue);
                },
                deep: true
            }
        }
    }
</script>
